<template>
	<view class="list-box">
		<view class="list" v-for="(item,index) in myList" :key="index">
			<view @click="clickHandler(nav)" class="list-item   space-between center" v-for="(nav,i) in item" :key="i">
				<view class="left center">
					<text :class="nav.icon"></text>
					<view class="title">{{nav.title}}</view>
				</view>
				<view class="right center">
					<switch @click.stop="()=>{}" @change="clickHandler(nav)" v-if="nav.checked || nav.checked === false"
						:checked="nav.checked" color="#345dc2" />
					<text v-if="nav.text">{{nav.text}}</text>
					<image v-if="nav.src" :src="nav.src" mode=""></image>
					<!-- 右侧图标 -->
					<text v-if="nav.rightIcon" :class="nav.rightIcon"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			myList: Array,
		},
		methods: {
			clickHandler(obj) {
				
				// uni.navigateTo({
				// 	url: '/pages/mine/setting'
				// })
				// if (obj.event) {
				// 	// 触发绑定的事件
				// 	this.$emit(obj.event, obj)
				// }
				if(obj.page) {
				//跳转目标页面，判断是否要求先登录
					this.navTo(obj.page, {login: obj.login})
					return
				 }
				 if(obj.event){
				 	this.$emit(obj.event,obj)
				 }


			}
		}
	}
</script>

<style lang="scss">
	.list-box {
		background-color: $mxg-color-grey;
		padding-top: 20rpx;

		.list {
			background-color: #fff;
			margin-bottom: 20rpx;

			.list-item {

				padding: 26rpx 39rpx;
				border-bottom: $mxg-underline;

				.left {
					font-size: 33rpx;

					text:first-child {
						margin-right: 20rpx;
					}
				}

				.right {
					text {
						font-size: 35rpx;
						color: $mxg-text-color-grey;
						margin-left: 15rpx;
					}

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 60px;
					}

					switch {
						margin-right: -10rpx;
					}
				}
			}
		}
	}
</style>
